<!DOCTYPE html>
<html xmlns:http="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" class="js cssanimations"
      lang="en">
<head th:include="include/fore/header::html">
    <meta charset="UTF-8">
    <title>指尖上的魔术师</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="keywords" content="blog,learning,IT,code,sirius,java,machine learning,playing all kinds of balls">
    <meta name="description" content="从事编程，喜欢各种球类、户外运动。专注于java技术栈，熟悉redis、shiro、elastic search、webmagic、websocket等中间件
    ，热衷前沿人工智能技术的学习，虽然只是入个门(*^__^*) 嘻嘻……。">

    <link rel="icon" type="image/x-icon" href="img/icon.jpg">
    <link href="css/amazeui.min.css" rel="stylesheet">
    <link href="css/amaze.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/fore/index.css">
    <link rel="stylesheet" href="css/plugs_paging.css">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/amazeui.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>

    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp", sans-serif;
        }
    </style>
    <style>
        .top_bar_active {
            color: #3bb4f2 !important;
            background-color: transparent !important;
        }
    </style>
</head>
<link href="css/fore/categories.css" rel="stylesheet">
<link href="css/fore/tags.css" rel="stylesheet">
<link href="css/fore/archives.css" rel="stylesheet">
<body>
<div th:replace="include/fore/top::html">
    <div class="am-topbar" style="background-color: #303643; position: fixed; z-index:100; width:100%; border-color: transparent;">
        <h1 class="am-topbar-brand">
            <a href="#" style="color:#fff">指尖上的魔术师</a>
        </h1>
        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav" style="padding-left: 0px; padding-top: 2px;">
                <li v-if="item == 'home'"><a class="top_bar top_bar_a top_bar_active" href="/"><span class="am-icon-home"></span>&nbsp;首页</a></li>
                <li v-else><a class="top_bar top_bar_a" href="/categories"><span class=""></span>&nbsp;文件夹</a></li>
                <li v-else><a class="top_bar top_bar_a" href="/date"><span class=""></span>&nbsp;日期</a></li>
                <li v-else><a class="top_bar top_bar_a" href="/tags"><span class=""></span>&nbsp;标签墙</a></li>
                <!--<li><a class="top_bar top_bar_a" href="/update"><span class=""></span>&nbsp;更新</a></li>-->
                <li v-else><a class="top_bar top_bar_a" href="/friendlylink"><span class=""></span>&nbsp;友链</a></li>
            </ul>
        
            <div class="am-topbar-right" th:if="${null==session.user}" style="margin-top: 3px; float: right;">
                <a href="/register" class="am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">注册</a>
            </div>
            <div class="am-topbar-right" th:if="${null==session.user}" style="margin-top: 3px; float: right;">
                <a href="/login" class="loginBtn am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">登录</a>
            </div>
        </div>
    </div>
</div>
<div id="app">
    <!--页面主体-->
    <div id="main">
        <div class="am-container main-body">
            <div class="am-g">
                <div class="site-inner">
                    <div class="am-u-sm-12 am-u-md-12">
                        <div class="categoryTimeline">
                            <div class="timeline timeline-wrap">
                                <div class="timeline-row">
                                    <span class="node" style="-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;"><i class="am-icon-tag"></i></span>
                                    <h1 class="title  am-animation-slide-top" style="font-size: 20px; font-weight: bold;"># java</h1>
                                </div>
                                <div>
                                    <div>
                                        <div class="timeline-row-major">
                                            <span class="node am-animation-slide-top am-animation-delay-1"></span>
                                            <div class="content am-comment-main am-animation-slide-top am-animation-delay-1">
                                                <header class="am-comment-hd" style="background: #fff">
                                                    <div class="contentTitle am-comment-meta">
                                                        <a>为什么要前后端分离？有什么优缺点？</a>
                                                    </div>
                                                </header>
                                                <div class="am-comment-bd">
                                                    <i class="am-icon-calendar"><a> 昨天</a></i>
                                                    <i class="am-icon-folder"> <a>点点滴滴</a></i>
                                                    <i class="am-comment-bd-tags am-icon-tag">
                                                        <span> java</span>
                                                    </i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="less-than-zero">
                                <img src="/img/null.png">
                                <p>空空如也</p>
                            </div>
                            <!--引入分页-->
                            <div v-if="articles.length>0"><div th:replace="include/page::html"></div></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--引入共有底部-->
    <div th:fragment="footer">
        <div class="footer">
            <div class="footer am-u-sm-centered" style="height: 42.5px; background-color: #222222;">
                <div class="am-vertical-align" style="text-align: center;">
                    <div class="am-vertical-align-bottom">
                        <div style="color: #009688;font-size: 15px; line-height: 42.5px;">
                            &copy; 2018-2019 指尖上的魔术师
                        </div>
                    </div>
                </div>
            </div>
            <!--<div id="sidebar_toggle" data-am-offcanvas="{target: '#offCanvas'}">-->
                <!--<div class="sidebar_toggle_line_wrap">-->
                    <!--<span class="sidebar-toggle-line sidebar-toggle-line-first" style="width: 100%; top: 0; transform: rotateZ(0deg); opacity: 1; left:0"></span>-->
                    <!--<span class="sidebar-toggle-line sidebar-toggle-line-middle" style="width: 100%; opacity: 1; left: 0; top: 0; transform: rotateZ(0deg);"></span>-->
                    <!--<span class="sidebar-toggle-line sidebar-toggle-line-last" style="width: 100%; top: 0; transform: rotateZ(0deg); opacity: 1; left: 0;"></span>-->
                <!--</div>-->
            <!--</div>-->
            <div id="offCanvas" class="am-offcanvas">
                <div class="am-offcanvas-bar am-offcanvas-bar-flip">
                    <div class="am-offcanvas-content">
                        <div class="sidebar-inner">
                            <div class="site-overview">
                                <div class="img-author" style="text-align: center">
                                    <p style="font-size: large;font-family: 仿宋">微信公众号</p>
                                    <div id="weixin">
                                        <img class="weixinPublic" src="/img/wechat _official_account.jpg">
                                    </div>
                                    <div class="author-name">
                                        指尖上的魔术师
                                    </div>
                                    <div class="author-words">
                                        <p>从事编程，喜欢各种球类、户外运动。专注于java技术栈，熟悉redis、shiro、elastic search、webmagic、websocket等中间件
                                            ，热衷前沿人工智能技术的学习，虽然只是入个门(*^__^*) 嘻嘻……。</p>
                                    </div>

                                </div>
                                <div class="site-state" style="opacity: 1; display: block; transform: translateX(0px);">
                                    <div class="site-state-item learn-posts">
                                        <a href="/archives">
                                            <span class="archivesNum site-state-item-count"></span>
                                            <span class="site-state-item-name">日志</span>
                                        </a>
                                    </div>
                                    <div class="site-state-item learn-categories">
                                        <a id="site-state-item-a" href="/categories">
                                            <span class="categoriesNum site-state-item-count"></span>
                                            <span class="site-state-item-name">分类</span>
                                        </a>
                                    </div>
                                    <div class="site-state-item learn-tags">
                                        <a href="/tags">
                                            <span class="tagsNum site-state-item-count"></span>
                                            <span class="site-state-item-name">标签</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="back-to-top" style="bottom: 60px; right: 40px; width: 50px; position: fixed; display: none;">
                <a href="#top" title="回到顶部">
                    <img src="img/top.png" style="width: 50px; max-width: 50px;"/>
                </a>
            </div>
        </div>
    </div>
</div>

<script src="js/all.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fore/article_of_tag.js"></script>
<script>
    var data4Vue = {
        item: 'tag'
    };
    //ViewModel
    var vue = new Vue({
        el: '#top',
        data: data4Vue,
        mounted:function(){ //mounted　表示这个 Vue 对象加载成功了

        },
        methods: {

        }
    });
</script>
</body></html>